<template>
  <div>
    <Button
      v-hasC="{ name: 'patient-diseases-create2', flag: 'v1/base/patient-diseases/create' }"
      type="primary"
      @click="openedit(-1)"
      >新增</Button
    >
    <Table highlight-row row-key="id" :columns="columns" :data="data" class="ivu-mt-16" @on-cell-click="cellclicktable">
      <template slot-scope="{ row }" slot="status">
        <Badge v-if="row.status === '1'" status="success" text="正常" />
        <Badge v-if="row.status === '0'" status="error" text="停用" />
      </template>
      <template slot-scope="{ row }" slot="sort">
        <span v-if="sortshow === row.id">
          <InputNumber v-width="'100%'" :formatter="$inputday" v-model="formItem.sort" @on-blur="cellblur"></InputNumber>
        </span>
        <span v-else>{{row.sort}}</span>
      </template>
      <template slot-scope="{ row }" slot="operation">
        <a
          v-hasC="{
            name: 'patient-diseases-update2',
            flag: 'v1/base/patient-diseases/update',
          }"
          @click="openedit(row)"
          >编辑</a
        >
        <Divider
        v-hasC="{
            name: 'v1-base-patient-diseases-disease-del',
            flag: 'v1/base/patient-diseases/disease-del',
        }"
        type="vertical"
    />
    <a
        v-hasC="{
            name: 'v1-base-patient-diseases-disease-del',
            flag: 'v1/base/patient-diseases/disease-del',
        }"
        @click="deleteTag(row)"
        >删除</a
    >
      </template>
    </Table>
    <div class="ivu-mt iuv-text-center"
      style="display:flex;justify-content: center;">
      <Page
        show-total
        show-elevator
        show-sizer
        :total="total"
        :current.sync="params.page"
        :page-size="params.pageSize"
        :page-size-opts="pageOpts"
        @on-change="changepage"
        @on-page-size-change="changepageSize"
      />
    </div>
    <Modal
      v-model="showedit"
      :title="edits ? '新增' : '编辑'"
      @on-cancel="canceledit('formItem')"
    >
      <Form
        :model="formItem"
        ref="formItem"
        :label-width="80"
        :rules="createRules"
      >
        <FormItem label="名称" prop="name">
          <Input v-model="formItem.name" placeholder="请输入"></Input>
        </FormItem>
        <FormItem label="排序" prop="sort">
          <Input v-model="formItem.sort" type="number"></Input>
        </FormItem>
        <FormItem label="父节点">
          <Select v-model="formItem.pid" clearable>
            <Option
              v-for="item in pidlist"
              :value="item.id"
              :key="item.id"
              :disabled="formItem.id === item.id"
              >{{ item.diseases_name }}</Option
            >
          </Select>
        </FormItem>
        <FormItem label="状态">
          <i-switch v-model="formItem.status">
            <span slot="open">On</span>
            <span slot="close">Off</span>
          </i-switch>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="canceledit('formItem')">取消</Button>
        <Button type="primary" :loading="subloading" @click="submitedit('formItem')">确定</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import mixins from "@/mixins/mixins";
import {
  patientdiseasesindex,
  patientdiseasesparentlist,
  patientdiseasescreate,
  patientdiseasesupdate,
  deleteBZ,
} from "@api/hqapi";
export default {
  name: "skin",
  mixins: [mixins],
  data() {
    return {
      formItem: {
        id: undefined,
        pid: "",
        name: "",
        sort: "",
        status: true,
        section_id: 2,
      },
      sortshow: undefined,
      columns: [
        { title: "名称", key: "diseases_name", tree: true },
        { title: "排序", key: "sort", slot: 'sort' },
        { title: "状态", slot: "status" },
        { title: "操作", slot: "operation" },
      ],
      // 参数
      data: [],
      pidlist: [],
      createRules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        sort: [
          {
            required: false,
            message: "请输入正整数",
            pattern: /^[+]{0,1}(\d+)$/,
            trigger: "blur",
          },
        ],
      }, // 模态框验证规则
      params: { page: 1, pageSize: 10, section_id: 2 },
    };
  },
  methods: {
    cellclicktable(row,v) {
      if (v.key === 'sort'){
        this.sortshow = row.id
        this.formItem = {
          id: row.id,
          pid: row.pid,
          name: row.diseases_name,
          sort: +row.sort,
          status: +row.status === 1,
          section_id: 2,
        };
      } else {
        this.sortshow = undefined
      }
    },
    cellblur() {
      let config = {
        id: this.formItem.id,
        pid: this.formItem.pid,
        name: this.formItem.name,
        sort: this.formItem.sort,
        status: this.formItem.status ? 1 : 0,
        section_id: 2,
      };
      patientdiseasesupdate(config).then(() => {
        this.sortshow = undefined
        this.formItem = {
          id: undefined,
          pid: "",
          name: "",
          sort: "",
          status: true,
          section_id: 2,
        };
        this.askData();
      });
    },
    deleteTag(row) {
            this.$Modal.confirm({
                title: "删除确认",
                content: "删除后将自动清空患者身上的该病种，不可恢复。",
                loading: true,
                onOk: () => {
                    deleteBZ({ id: row.id }).then((res) => {
                        this.$Modal.remove();
                        this.$Message.success("删除成功");
                        this.askData();
                    });
                },
            });
        },
    initial() {
      this.funaskData = patientdiseasesindex;
      this.funupdate = patientdiseasesupdate;
      this.funcreate = patientdiseasescreate;
      this.askData();
    },
    /* @函数功能: 请求数据 */
    askDatas(res) {
      this.data = res.list;
      this.total = res.total;
      patientdiseasesparentlist({ section_id: this.params.section_id }).then(
        (res) => {
          this.pidlist = res;
        }
      );
    },
    paramscancel() {
      this.formItem = {
        id: undefined,
        pid: "",
        name: "",
        sort: "",
        status: true,
        section_id: 2,
      };
    }, // 新增编辑取消数据处理
    paramsedit(row) {
      this.formItem = {
        id: row.id,
        pid: row.pid,
        name: row.diseases_name,
        sort: +row.sort,
        status: +row.status === 1,
        section_id: 2,
      };
    }, // 新增编辑显示数据处理
    paramssubmit() {
      let config = {
        id: this.formItem.id,
        pid: this.formItem.pid,
        name: this.formItem.name,
        sort: this.formItem.sort,
        status: this.formItem.status ? 1 : 0,
        section_id: 2,
      };
      return config;
    }, // 新增编辑提交数据处理
  },
};
</script>
